<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="first_name">
        </br>
        名：<input type="text" v-model="family_name">
        </br>
        姓名：<span>{{first_name.slice(0,3)}}-{{family_name}}</span>
    </div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            first_name:'张',
            family_name:'三',
        }
    })
</script>
</body>
</html>